<template>
	<div
		class='search-member popup'
		@click="emit('close')"
	>
		<div
			class="content"
			@click.stop=""
		>
			<el-icon
				class="close-icon"
				size="24px"
				@click="emit('close')"
			>
				<CircleClose />
			</el-icon>
			<h2 class="center">用户搜索</h2>
			<div>
				<el-input
					placeholder="输入用户的昵称进行搜索"
					size="large"
					v-model="searchKey"
					@input="searchUsers"
				/>
			</div>
			<div class="members">
				<div
					class="members-item"
					v-for="member in members"
					:key="member.userId"
					@click="onSelectMember(member)"
				>
					<el-avatar
						:size="50"
						:src="member.avatarUrl || LOGO"
					/>
					<!-- 昵称 & 专业技能 -->
					<div class="info">
						<div class="name">{{member.nickname || 'Aha萌新'}}</div>
						<div class="major">{{member.major}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import { CircleClose } from '@element-plus/icons-vue'
import { getUserList } from '@/api/user'
import { throttle } from '@/utils/tools'
import { LOGO } from '@/constants/index'
import type { UserListItemType } from '@/modules/user'
import { $confirm } from '@/utils/functions'

const emit = defineEmits<{
  (e: 'close'):void,
  (e: 'select', val: UserListItemType):void
}>()
const members = ref<UserListItemType[]>([])

const searchKey = ref('')

/**
 * 搜索用户
 */
const searchUsers = () => {
  throttle(async() => {
    const res = await getUserList({
      keyWord: searchKey.value,
      pageNum: 1,
      pageSize: 10
    })
    members.value = res.data.pageData
    console.log(members.value)
  }, 500)
}

/**
 * 选择用户
 */
const onSelectMember = (member:UserListItemType) => {
  $confirm('确认选择该用户？', () => {
    emit('select', member)
    emit('close')
  })
}
searchUsers()
</script>

<style lang="scss" scoped>
.search-member {
  .content {
    width: 400px;
    padding: 10px 20px;

    .close-icon {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 1;
      cursor: pointer;
    }

    h2 {
      color: $primary1;
    }

    .el-input {
      margin: 10px 0;
    }

    .members {
      height: 300px;
      overflow-y: auto;

      &-item {
        display: flex;
        padding: 10px 0;
        cursor: pointer;
        border-bottom: $borderLight;

        &:hover {
          background-color: $primary5;
        }

        .info {
          margin-left: 10px;

          .name {
            font-weight: bold;
          }

          .major {
            font-size: $sSmall;
          }
        }
      }
    }
  }
}
</style>
